import Taro, { Component } from '@tarojs/taro';
import { View, Text, Button, Swiper, SwiperItem, Image, RichText } from '@tarojs/components';
import Banner from '../../static/home/banner.png';
import Consult from '../../static/goods-detail/icon_Consultation.png';
import TipsModal from '../../../components/tips-modal/index.js';
import './index.scss';
import { goodsHotDetail, exchangeGoodsDetail } from '../../../services/goods';
import Sku from '../../../components/hot-sku/index.js';
import { set as setGlobalData, get as getGlobalData } from '../../../utils/globalData';
import NavigationBar from '../../../components/navigationBar/index';
import { fullImgUrl } from '../../../utils/utils';

export default class Index extends Component {
  config = {
    navigationBarTitleText: '',
  };

  state = {
    exchangeData: null,
    isShowModal: Taro.getStorageSync('setting').is_tip,
    goods: null,
    goodsSku: null,
    hotGoodsId: 0,
    setting: null,
    isShowGoodsInfo: false,
    navigationBarHeight: Taro.getStorageSync('navigationBarHeight'),
    originPrice:0,
  };

  componentWillMount() {
    console.log(this.$router, 'router');
    let id = '';

    if (this.$router.params.scene) {
      const scene = decodeURIComponent(this.$router.params.scene + '');
      console.log(scene, 'scene');
      let arr = scene.split('=');
      id = arr[1];
    }
    goodsHotDetail({
      hot_goods_id: id || 1,
    }).then(res => {
      Taro.setNavigationBarTitle({
        title: res.has_goods.goods_name,
      });
      res.has_goods.details = res.has_goods.details.replace(
        /\<img/gi,
        '<img style="width: 100% !important" class="rich-img"'
      );
      res.has_goods.banner = res.has_goods.banner.split(',');
      res.has_goods.banner.forEach((item, index) => {
        res.has_goods.banner[index] = fullImgUrl(item);
      });
      this.setState(
        {
          hotGoodsId: res.id,
          goods: res.has_goods,
          setting: getGlobalData('setting'),
          goodsSku: [res.has_sku],
          originPrice:res.origin_price
        },
        () => {
          console.log(this.state.goodsSku, 'ssss');
        }
      );
    });
  }
  componentDidMount() {}
  componentWillReceiveProps(nextProps, nextContext) {}
  componentWillUnmount() {}
  componentDidShow() {}
  componentDidHide() {}
  componentDidCatchError() {}
  componentDidNotFound() {}

  consult = () => {
    let self = this;
    console.log(this.state.setting);
    Taro.showModal({
      title: '咨询热线',
      content: this.state.setting.mobile,
    }).then(res => {
      if (res.confirm) {
        Taro.makePhoneCall({
          phoneNumber: self.state.setting.mobile,
        });
      }
    });
  };

  close = () => {
    this.setState({
      isShowModal: false,
    });
  };

  showGoodsInfo() {
    this.setState({
      isShowGoodsInfo: true,
    });
  }

  closeGoodsInfo() {
    console.log('close');
    this.setState({
      isShowGoodsInfo: false,
    });
  }

  render() {
    const { isShowModal, goods, isShowGoodsInfo, exchangeData, goodsSku } = this.state;
    return (
      <View className='container' style={`margin-top: ${navigationBarHeight}`}>
        <NavigationBar text={goods ? goods.goods_name : '商品详情'} />
        {isShowModal && goods && !goods.goods_type && <TipsModal onClose={this.close}></TipsModal>}
        {goods && (
          <View className='goods-detail'>
            <View className='top'>
              <Swiper
                className='banner'
                indicatorColor='#DDD'
                indicatorActiveColor='#B2B2B2'
                circular
                indicatorDots
                autoplay
              >
                {goods.banner.map((banner, index) => {
                  return (
                    <SwiperItem key={index}>
                      <Image mode='aspectFit' className='goods-image' src={banner} />
                    </SwiperItem>
                  );
                })}
              </Swiper>
              <View class='goods'>
                <View class='goods-info'>
                  <View className='goods-name'>{goods.goods_name}</View>
                  <View className='goods-price'>
              <Text className='prompt-goods-price'>￥{this.state.originPrice||398}</Text>¥{goods.price}
                  </View>
                </View>
                <View className='goods-desc'>{goods.goods_desc}</View>
              </View>
            </View>
            <View className='middle'>
              <View className='title'>商品详情</View>
              <RichText className='rich-text' nodes={goods.details}></RichText>
            </View>
          </View>
        )}

        {goods && (
          <View className='bottom'>
            <View className='consult-wrapper' onClick={this.consult}>
              <Image src={Consult} className='consult' />
              <View className='text'>咨询</View>
            </View>
            <View className='buy-now' onClick={this.showGoodsInfo}>
              立即购买
            </View>
          </View>
        )}
        {isShowGoodsInfo && goods && (
          <Sku
            onClose={this.closeGoodsInfo.bind(this)}
            goodsImage={goods.banner}
            goodsAttr={goods.has_attr}
            goodsSku={goodsSku}
            goodsType={goods.goods_type}
            hotGoodsId={this.state.hotGoodsId}
          />
        )}
        {isShowGoodsInfo && exchangeData && (
          <Sku exchangeData={exchangeData} code={this.$router.params.code} />
        )}
      </View>
    );
  }
}
